<template>
	<view>
		<Header title="坚果订单详情"></Header>
		<view class="main_wrap">
			<view class="main">
				<view class="main_item">
					<van-row>
						<van-steps :steps="steps" :active="1" />
					</van-row>
				</view>
				<view class="main_item">
					<view>xxx用户发起的坚果收购订单</view>
				</view>
				<view class="main_item">
					<view>订单编号:xxxx</view>
				</view>
				<view class="main_item">
					<view>订单时间:2021-07-28 10:00:00</view>
				</view>
				<view class="main_item">
					<view>收购人员:xxx</view>
				</view>
				<view class="main_item">
					<view>组织机构代码:xxx</view>
				</view>
				<view class="main_item">
					<view>联系人:xxx</view>
				</view>
				<view class="main_item">
					<view>联系电话:xxxx</view>
				</view>
				<view class="main_item">
					<view>联系地址:xxxx</view>
				</view>
				<view class="main_item">
					<view>xxx用户发起的坚果收购订单</view>
				</view>
				<view class="main_item">
					<view>授权委托书:<text>已上传</text><text>查看</text></view>
				</view>
				<view class="main_item">
					<view>订单金额:xxx</view>
				</view>
				<view class="main_item">
					<view>备注:</view>
					<van-cell-group>
						<van-field type="textarea" :border="false" />
					</van-cell-group>
				</view>
				<view class="main_item ">
					<view class="mb20">订单详情:</view>
					<view class="table bb" >
						<view class="row_item th">
							<van-row style="text-align: center;">
								<van-col span="6">名称</van-col>
								<van-col span="6">单价</van-col>
								<van-col span="6">数量</van-col>
								<van-col span="6">小计</van-col>
							</van-row>
						</view>
						<view class="row_item">
							<van-row style="text-align: center;">

								<van-col span="6" custom-class="vv">
									大果
								</van-col>


								<van-col span="6">6.00</van-col>
								<van-col span="6">5000</van-col>
								<van-col span="6">30000</van-col>
							</van-row>
						</view>
						<view class="row_item">
							<van-row style="text-align: center;">
								<van-col span="6" custom-class="vv">中果</van-col>
								<van-col span="6">6.00</van-col>
								<van-col span="6">5000</van-col>
								<van-col span="6">30000</van-col>
							</van-row>
						</view>
						<view class="row_item">
							<van-row style="text-align: center;">
								<van-col span="6" custom-class="vv">小果</van-col>
								<van-col span="6">6.00</van-col>
								<van-col span="6">5000</van-col>
								<van-col span="6">30000</van-col>
							</van-row>
						</view>
						<view class="row_item">
							<van-row style="text-align: center;">
								<van-col span="6" custom-class="vv">合计</van-col>
								<van-col span="18">总价</van-col>
							</van-row>
						</view>

					</view>
				</view>
				<view class="main_item">
					<view>收款账户:</view>
				</view>
				<view class="main_item">
					<view>账户名:xxxx</view>
				</view>
				<view class="main_item">
					<view>账户号:xxxxx</view>
				</view>
				<view class="main_item">
					<view class="bb pb30">
						<view>开户行:xxxxxx</view>
					</view>
				</view>
				
				<view class="main_item">
					<view class="mb20">订单处理</view>
					<van-row>
						<van-col span="12">
							
								<van-uploader file-list="fileList" bind:after-read="afterRead" preview-image upload-icon="photo" :preview-full-image="true">
									
								</van-uploader>
								<view style="text-align: center;">纸质收购单拍照上传</view>
								
							
			
							
						</van-col>
						<van-col span="12" style="text-align: center;line-height: 200rpx;">
							查看实例文件
						</van-col>
					</van-row>
				</view>
				
				<view class="main_item">
					<view class="zhuanzhang">
						<view style="margin-bottom: 20rpx;">转账单回执</view>
						<view>
							<van-uploader file-list="fileList" bind:after-read="afterRead" preview-image upload-icon="photo" :preview-full-image="true">
								
							</van-uploader>
						</view>
					</view>
					
				</view>
				
				
				<view class="main_item">
					<van-radio-group :value="radio" @change="onChange">
					  <van-radio name="1" shape="square">我已确认收到款项!</van-radio>
					</van-radio-group>
				</view>
				
				<view class="main_item">
					<van-row>
						<van-col span="12" offset="6">
							<van-button type="primary" size="normal" block custom-class="he60"
								>确定
							</van-button>
						</van-col>
					</van-row>
					
				</view>
			</view>

		</view>



	</view>
</template>

<script>
	import Header from "../../components/header.vue"
	export default {
		data() {
			return {
				steps: [{
						text: '步骤一',
						desc: '待确认',
					},
					{
						text: '步骤二',
						desc: '已付款',
					},
					{
						text: '步骤三',
						desc: '收款确认',
					},
					{
						text: '步骤四',
						desc: '已完成',
					},
					{
						text: '步骤四',
						desc: '已收款'
					}
				],
				fileList: [{
						url: 'https://img.yzcdn.cn/vant/leaf.jpg',
						name: '图片1',
					},
					// Uploader 根据文件后缀来判断是否为图片文件
					// 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
					
				],
				 radio: true,

			}

		},
		components: {
			Header,

		},
		methods: {
			onChange(event){
				console.log(event.detail)
				this.radio = event.detail
			}
		}
	}
</script>

<style lang="scss" scoped>
	.th {
		background-color: #bfa !important;
	}
	/deep/ .he60{
		height: 60rpx;
	}
	.pb30{
		padding-bottom: 30rpx;
	}
	.mb20{
		margin-bottom: 20rpx;
	}
	.bb{
		border-bottom: 1px solid red;
	}
	/deep/ .van-uploader__upload{
		width: 320rpx !important;
		height: 200rpx !important;
		border-radius: 0;
		background-color: #e8e8e8;
	}

	/deep/ .vv {
		background-color: #bfa !important;
	}

	.main_wrap {
		padding: 20rpx 20rpx 0 10rpx;

		.main {
			border: 1px solid red;
			border-radius: 0rpx;

			.main_item {
				padding: 0 40rpx;
				margin-bottom: 20rpx;
				
				.zhuanzhang{
					border-top: 1px solid red;
					margin-top: 60rpx;
					padding-top: 20rpx;
				}
				
				.table{
					border-bottom: 1px solid red;
					padding-bottom: 60rpx;
				}

				/deep/ .van-cell {
					padding-left: 0;
					border-bottom: 1px solid red;
				}

				// .table{
				// 	border-right: 1px solid red;
				// }
				.row_item {
					border-top: 1px solid red;

					// border-left: 1px solid red;
					// border-right: 1px solid red;
					&:last-child {
						border-bottom: 1px solid red;
					}

					/deep/ .van-row {
						&:last-child {
							border-right: 1px solid red;
						}
					}

					/deep/ .van-col {
						padding: 20rpx 0 !important;
						border-left: 1px solid red;

						// &:last-child{
						// 	border-right: 1px solid red;
						// }
					}

					// padding: 20rpx 0;
				}
			}
		}
	}
</style>
